<template>
	<div style="display: flex; justify-content: space-between">
		<h2>班级管理</h2>
		<h2><button @click="go2add()">添加班级</button></h2>
	</div>
	<div style="display: flex">
		<div style="width: 67%; border: blue 1px solid">
			<h2 style="text-align: center">班级显示</h2>
			<table border="1" style="width: 100%">
				<tr>
					<th>班级编号</th>
					<th>班级名称</th>
					<th>操作</th>
				</tr>
				<!-- 选择后高亮 -->
				<tr v-for="x, idx in clzs" @click="go2update(x)" :class="{ c: clz.clzno == x.clzno }">
					<th>{{ x.clzno }}</th>
					<th>{{ x.clzname }}</th>
					<th><button @click="del(x.clzno)">删除</button></th>
				</tr>
			</table>
			{{ dodel }}
		</div>
		<div style="width: 32%; border: green 1px solid">
			班级编号：<input type="text" v-model="clz.clzno" v-show="actidx == 1">
			<input type="text" v-model="clz.clzno" v-show="actidx == 0" readonly><br>
			<hr>
			班级名称：<input type="text" v-model="clz.clzname"><br>
			<hr>
			<button @click="addupdate()">添加/修改</button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'clz',
	data() {
		return {
			clzs: [],//定义班级数组
			clz: {}, // 定义修改或添加对象
			actidx: 0, // 定义添加修改属性（1是添加，0是修改）
			token: "",
			dodel: ""
		}
	},
	methods: {
		del(clzno) {
			this.$axios.get(this.$ip + "/api/adm/clz/del?clzno=" + clzno, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.clzs = resp.data.data;
					this.dodel = resp.data.msg;
					console.log(resp.data);
				})
				.catch((error) => {
					console.error("删除班级:", error);
					alert("删除班级失败");
				});
		},
		go2add() {
			this.clz = { clzno: '', clzname: '' }; // 初始化对象
			this.actidx = 1; // 将属性改为添加
		},
		addupdate() {
			if (!this.clz.clzno || !this.clz.clzname) {
				alert("班级编号和名称不允许为空");
				return;
			}
			const fd = new FormData();
			fd.append("clzno", this.clz.clzno);
			fd.append("clzname", this.clz.clzname);
			const url = this.actidx > 0 ? this.$ip + "/api/adm/clz/add" : this.$ip + "/api/adm/clz/update";
			this.$axios.post(url, fd, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.clzs = resp.data.data;
					this.dodel = resp.data.msg;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error("添加或更新班级:", error);
					alert("添加或更新班级失败");
				});
		},
		go2update(clz) {
			this.actidx = 0; // 属性改为修改
			this.$axios.get(this.$ip + "/api/adm/clz/findOne/" + clz.clzno, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.clz = resp.data.data;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error("查询班级:", error);
					alert("查询班级失败");
				});
		}
	},
	mounted() {//获取班级列表
		this.token = window.localStorage.getItem("token");//获取token
		console.log(this.token);
		this.$axios.get(this.$ip + "/api/public/getClzs")
			.then((resp) => {//获取班级列表
				this.clzs = resp.data.data;//赋值
				console.log(resp.data.data);
			})
			.catch((error) => {
				console.error("获取班级列表:", error);
				alert("获取班级列表失败");
			});
	}
}
</script>

<style>
/* 设置高亮 */
.c {
	color: rgb(0, 195, 255);
	background: rgb(252, 11, 252);
}
</style>